<html>
<head>

	<link href="style.bookmarklet.css" rel="stylesheet" type="text/css" media="all"/>
	<link href="style.readmeme.css" rel="stylesheet" type="text/css" media="all"/>
	<script src="jquery.js" type="text/javascript"></script> 
	<script src="config.js" type="text/javascript"></script> 
	<script src="read-meme.js" type="text/javascript"></script> 
        <script src="jquery.autoresize.js" type="text/javascript"></script>

	<script>

	var backupTimer = 10 * 1000;
	var saveUrl = "http://meemi.com/api3/p/save/json";
	var encoder = encodeURIComponent;
	var sourceUrl;
	
	function init() {
		var savedContent;
		if( localStorage.savedElement )
			savedContent = JSON.parse( localStorage.savedElement );
	
		logLevel = localStorage.logLevel;
		
		if( !localStorage.username ){
			writeLog('Primo utilizzo, impostare le opzioni',LOG_INFO);
			showUserMessage('Primo utilizzo, <a href="javascript:openPage(\'option.html\')">impostare le opzioni</a>');
		}
		
		if( localStorage.whereToReadMeme == "popup" )
			document.getElementById("create-new-meme").style.display = "inline";
		document.getElementById( "text_content" ).focus();
		if( localStorage.showRandomMeme == "hide" )
			document.getElementById( "random-meme" ).style.display = "none";
			
		// Getting Saved Content of the meme from the backup. If they exist.
		if( !( savedContent === undefined ) && savedContent.length > 0) {
			var textID;
			var textValue;
			writeLog( "Restoring saved elements.", LOG_INFO );
			for( var index = 0; index < savedContent.length; index++ ) {
				textID = savedContent[index].textID;
				textValue = savedContent[index].textValue;
				writeLog( "Restoring: " + textID + " -> " + textValue, LOG_MOREINFO );
				document.getElementById( textID ).value = textValue;
				}
			convert_textarea2div();
		}
		document.getElementById( 'img_url' ).value = "";
		
		// Getting the Url of the Selected tab.
		chrome.tabs.getSelected( undefined, function( tab ) {
			if( tab.url ) {
				sourceUrl = tab.url;
				// Setting the Meme Link Field.
				document.getElementById( "link_url" ).value = sourceUrl;
				// Setting the link Field of Video Meme and select automaticly video Type.
				if( youtubeId = sourceUrl.match( YOUTUBE_REGEXP )) {
					$( "#video_content" ).val( "http://www.youtube.com/watch?v=" + youtubeId[1]);
					$('a').removeClass('active');
					$( "#video_btn" ).addClass('active');
					section('video'); }
				else if( vimeoId = sourceUrl.match( VIMEO_REGEXP )) {
					$( "#video_content" ).val( sourceUrl );
					$('a').removeClass('active');
					$( "#video_btn" ).addClass('active');
					section('video'); }
			}
		});

		window.setTimeout( saveContent, backupTimer );
	}

	var img, img_tag, aspect, w, h, skip, i, timer;
	var src = [];
	var last = null;
	function pick( img ) {
		if( last )
			last.style.backgroundColor = '#f4f4f4';
		if( img ) {
			document.getElementById( 'img_url' ).value = img.src;
			img.style.backgroundColor = '#44f'; }
		last = img;
		return false;
	}
					
	// Injecting the code on the Page
	chrome.tabs.executeScript( undefined, { "file": "page-script.js", "allFrames": true, });
	chrome.extension.onRequest.addListener( function( request, sender, undefined ) {
		writeLog( "Retrived data from web page.", LOG_INFO );
		if( request.validation == "page-script" && request.imagesArray ) {
			writeLog( "Retrieved images from web page.", LOG_MOREINFO );
			src = request.imagesArray;
			var imagesList = document.getElementById( "images_list" );
		
			// Creating image
			for( i = 0; i < src.length; i++ ) {
				var image = document.createElement( "image" );
				
				// Setting div to contain image and image size
				var imageContainer = document.createElement( "div" );
				imageContainer.setAttribute( "id", "img_container" );
			
				image.src = src[i].src;
				image.setAttribute( 'id', 'img' + i );
				image.setAttribute( 'onclick', 'pick( this );' );
				
				//resizing image maintaining proportions
				maxDimThumbnail = 100; //maybe we should let the user choose this value
				if(src[i].width>src[i].height){
					image.width=maxDimThumbnail;
					image.height=(maxDimThumbnail/src[i].width)*src[i].height;
				}else{
					image.height=maxDimThumbnail;
					image.width=(maxDimThumbnail/src[i].height)*src[i].width;
				}
				image.hspace = maxDimThumbnail-image.width;
				image.vspace = maxDimThumbnail-image.height;
				
				//add the image in the container
				imageContainer.appendChild( image );
				// Add the label to the container
				var labelDiv = document.createElement( "div" );
				labelDiv.setAttribute( "id", "image_label" );
				labelDiv.appendChild( document.createTextNode( src[i].width + ":" + src[i].height ));
				imageContainer.appendChild( labelDiv );
				// Add the container to the images list
				imagesList.appendChild( imageContainer );
			}}
		if( request.validation == "page-script" && request.selectedText ) {
			var requestText = request.selectedText;
		if( requestText.indexOf( "<object" ) == 0 || requestText.indexOf( "<embed" ) == 0 )
				document.getElementById( "video_content" ).value = requestText;
			else
				$( "#text_content" ).html(request.htmlSelection); }
	});

	
	// Functions by the Bookmarklet to create the Content.
	var ex = "text"; 
	function add_twitter() {
		if ( $( '#text_content' ).html().substr( 0,7 ) == "(@twit)" ) {
			$( '#text_content' ).html( $( '#text_content' ).html().replace( '(@twit)', '' )); }
		else {
			$( '#text_content' ).html( $( '#text_content' ).html().replace( 'draft#', '' ));
			$( '#text_content' ).html( '(@twit)' + $( '#text_content' ).html() ); }
	}
	function add_notes() {
		if ( $( '#text_content' ).html().substr( 0,6 ) == "draft#" ) {
			$( '#text_content' ).html( $( '#text_content' ).html().replace( 'draft#', '' )); }
		else { 
			$( '#text_content' ).html($('#text_content').html().replace('(@twit)',''));
			$( '#text_content' ).html( 'draft#' + $( '#text_content' ).html() ); }
	} 
	function optio() {
		if ( $( '#opt' ).css( 'display' ) != "none" ) {
			$( '#opt' ).slideUp();
			$( '#posting' ).slideUp(); }
		else { 
			$( '#opt' ).slideDown();
			$( '#posting' ).slideDown(); }
	}
	function emo() {
		if ( $( '#emoticons' ).css( 'display' ) != "none" ) {
			$( '#emoticons' ).slideUp(); }
		else {
			$( '#emoticons' ).slideDown(); }
	}
	function placeEmoticons( value ) {
		document.execCommand('insertHTML',false,' '+value+' ',true);
		//$( '#text_content' ).html( $( '#text_content' ).html() + value + " " );
	}
	function section( id ) {
		$( '#f_' + ex ).slideUp( "fast", function() {
			$( '#f_' + id ).slideDown();
			$( '#meme_type' ).val( id );
			ex = id;
		});
	}
	
	// JQuery code to implements the autoresize capability of the Text Areas.
	$( document ).ready( function () {
		$( 'textarea' ).autoResize({ onResize : function() {
			$( this ).css({ opacity:0.8 });
		}, animateCallback : function() {
			$( this ).css({ opacity:1 });
		}, animateDuration : 300, extraSpace : 10 });
	});
	
	// Error Handler function.
	function failedSending() {
		var button = document.getElementById( 'send-meme-button' );
		button.removeAttribute( "disabled" );
		button.innerHTML = "Retry";
	}
	
	// Submit the form with the compiled fields.
	function submitForm() {
		var requestTimeout = 1000 * 15;
		var request = new XMLHttpRequest();
	
		var params = "meemi_id=" + encoder( localStorage.username ) + "&" +
			     "pwd=" + encoder( localStorage.password ) + "&" +
			     "app_key=" + encoder( applicationKey ) + "&";
				 
		//before sending we need to convert tags
		convert_div2textarea();
		
		var inputs = document.getElementsByTagName( 'input' ); // Inputs like "meme type", "quote author", ecc.
		var selects = document.getElementsByTagName( 'select' ); // Dates for the Event type.
		var textContents = document.getElementsByTagName( 'textarea' ); // Content, url e embedded code.
		var memeType = document.getElementById( 'meme_type' );
		
		// Disabling button, notifying Sending.
		var button = document.getElementById( 'send-meme-button' );
		button.setAttribute( "disabled", "disabled" );
		button.innerHTML = "Sending...";
		
		// Getting the Text Area contents.
		for( index = 0; index < textContents.length; index++ )
			if( textContents[index].value != "" && textContents[index].name != "" )
				params += textContents[index].name + "=" + encoder( textContents[index].value ) + "&";
		// Getting the Inputs contents.
		for( index = 0; index < inputs.length; index++ )
			if( inputs[index].value != "" )
				params += inputs[index].name + "=" + encoder( inputs[index].value ) + "&";
		// Getting the Selects contents only if "event_type" is selected.
		if( memeType.value == "event" )
			for( index = 0; index < selects.length; index++ )
				params += selects[index].name + "=" + encoder( selects[index].options[selects[index].selectedIndex].value ) + "&";
		// Deleting the Last "&"
		params = params.substring( 0, params.length - 1 );
		
		var abortTimerId = window.setTimeout( function() {
				request.abort();
				console.log( "Meemi Server don't give a Response in: " + requestTimeout );
				failedSending(); }
			, requestTimeout );
		// Open the Connection.
		request.open( "POST", saveUrl, true );
		request.onreadystatechange = function() {
			if( request.readyState == 4 ) {
				window.clearTimeout( abortTimerId );
				if( request.status == 200 ) {
					writeLog( "Response on Sending: " + request.responseText, LOG_MOREINFO );
					
					try {	
						JSONData = JSON.parse( request.responseText );
						if( JSONData.message ) {
							writeLog( "Meme sent: " + JSONData.message.id_meme, LOG_INFO );
							button.innerHTML = "Done";
							button.setAttribute( "disabled", "disabled" );
							
							//clear form values
							$('#container')[0].reset();
							$(':input').not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('selected');
							convert_textarea2div();
							//clear temp variable
							saveContent();
							
							//close the window after 1 second
							window.setTimeout( window.close, 1000 * 1 ); }
						else {
							writeLog( "Error on Meme Sending.", LOG_ERROR );
							failedSending(); }
					}
					catch( exception ) {
						writeLog( "Meemi server didn't send a valid JSON document (" + exception + ")", LOG_ERROR );
						failedSending();
					}}
				else {
					console.log( "Wrong Request Status: " + request.status );
					failedSending(); }}
		}
		
		request.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
		request.send( params );
	}

	// Valuate if the given url can be a Meemi page.
	function isMeemiUrl( urlFrom, urlTo ) {
		return urlFrom.indexOf( urlTo ) == 0;
	}

	// Get the Meemi timeline Url for the saved username.
	function getMeemiUrl( addings ) {
		if( !addings )
			addings = "";
		// return getMeemiAPIURL(null,localStorage.username,"/wf/" + addings)
		// Doing correction on API incongruence.
		if( addings == "only_new_new_followers" )
			addings = "only_new_followers";
		if( addings == "only_new_memes_priv" )
			addings = "only_new_memes_private";
		if( addings == "only_new_replies_priv" )
			addings = "only_new_replies_private";
		return "http://meemi.com/" + localStorage.username + "/wf/" + addings;
	}

	// Shows memes on Meemi page or in the popup page, base on user choice
	function openPage( page ) {
		if( !page )
			page = "";
		if( page == "only_new_new_followers" )
			page = "only_new_followers";
		
		// if the page is an http page (not meemi) then open it in other tab
		if( page.substring( 0, 7 ) == "http://" ){
			chrome.tabs.create({ url: page });
			return;
		}
		
		// select the tab with a Meemi page if already exists or create a new one on the Meemi timeline.
		if( localStorage.whereToReadMeme=='meemi' ){
			chrome.tabs.getAllInWindow( undefined, function( tabs ) { // Getting all Tab in selected Windows.
				for( var i = 0, tab; tab = tabs[i]; i++ ) {
					// For each tab checking if there is a Meemi url
					if ( tab.url && isMeemiUrl( tab.url, getMeemiUrl( page ))) {
						chrome.tabs.reload(tab.id);
						chrome.tabs.update(tab.id, { active: true });
						return; }
				}
				// Otherways create a new tab with the Url.
				chrome.tabs.create({ url: getMeemiUrl( page ) });
			});
		
		// retrieve and show memes
		}else if(localStorage.whereToReadMeme=='popup') {
			if( page == "" ) {
				chrome.tabs.getAllInWindow( undefined, function( tabs ) { // Getting all Tab in selected Windows.
					for( var i = 0, tab; tab = tabs[i]; i++ ) {
						// For each tab checking if there is a Meemi url
						if ( tab.url && tab.url.substring( 0, 16 ) == "http://meemi.com" ) {
							chrome.tabs.update(tab.id, { selected: true });
							return; }
					}
					// Otherways create a new tab with the Url.
					chrome.tabs.create({ url: "http://meemi.com/" + localStorage.username+ "/wf" });
				});
				return;
			}
			$('#meemi-form').fadeOut('slow',function(){
				$('#meemi-memelist').fadeOut('slow',function(){
					$('#meemi-memelist').html("<span class='temp'>retrieving data...</span>");
					$('#meemi-memelist').slideDown('slow');
					retrieveMemeListJSON(page);
				});
			});
		}else{
			//if nothing happened...
			chrome.tabs.create({ url: page });
			return;
		}
	}
	
	// Show only Meemi Form /usr/share/icons/Human/scalable/status
	function showMeemiForm(){
		$('#meemi-memelist').fadeOut('slow',function(){
			$('#meemi-form').slideDown('slow');
		});
	}
	
	// Set the source field when the checkbox passed as parameter is checked.
	function sourceClick( sourceElement ) {
		var sourceField = document.getElementById( "fonte" );
		sourceElement = sourceElement.firstChild;
		if( sourceElement.getAttribute( "class" ) == "" ) {
			sourceField.value = "via: " + sourceUrl;
			sourceElement.setAttribute( "class", "active" ); }
		else {
			sourceField.value = "";
			sourceElement.setAttribute( "class", "" ); }
	}
	
	function createSelector() {
		var selector = $( "#selector" );
		var notification = JSON.parse(localStorage.notificationCount);
		
		$.each(notification,function(elName,elValue) {
			if(selector.find('#'+elName).length==0){
				selector.append('<div class="notify" id="'+elName+'">');
			}
			var position = selector.find('#'+elName);
			position.html('');


			// Creating the image.

			if( elValue > 0 ) {
				// Creating the link.
				position.append('<div class="badge round">');
				position.find('.badge').html( elValue.toString());
				
				position.append('<a>');
				var link = position.find('a');
				link.attr('href',"javascript: openPage( 'only_new_" + elName + "' );");
				link.append('<img>');
				
				position.find('img').attr('src',"icons/new-" + elName + "-on.png");
				
			}
			else {
				position.append('<img>');
				position.find('img').attr('src',"icons/new-" + elName + "-off.png");
			}
		});
	}
	
	function compileRandomMeme() {
		writeLog( "Showing Random Meme", LOG_MOREINFO );
		chrome.extension.sendRequest(
			{ validation: "random-meme" },
			function( response ) {
				var textDiv = document.getElementById( "random-meme-text" );
				var typeDiv = document.getElementById( "random-meme-type" );
				var authorDiv = document.getElementById( "random-meme-author" );
				var memeLink = document.createElement( "a" );

				memeLink.href = "javascript:void(0);";
				memeLink.setAttribute( "onclick", "chrome.tabs.create({ url: 'http://meemi.com/" + response.screen_name + "/" + response.id + "' });" );
				memeLink.innerHTML = firstUpper( response.meme_type );
				typeDiv.appendChild( memeLink );
				textDiv.innerHTML = response.content;
				authorDiv.innerHTML = response.screen_name;
			});
	}
	
	function firstUpper( oldString ) {
		return oldString.charAt(0).toUpperCase() + oldString.substring(1);
	}
	
	function saveContent() {
		var text;
		// Global Index to fill the Array.
		var globalIndex = 0;
		// Resetting the Array.
		var savedContent = [];
		writeLog( "Saving Content", LOG_INFO );
		
		//before scan we need to convert tags
		convert_div2textarea();

		// Scanning the TextArea.
		text = document.getElementsByTagName( "textarea" );
		for( var index = 0; index < text.length; index++ ) {
			// Saving Values for further use.
			textID = text[index].id;
			textValue = text[index].value
			// Checking if they had a Valid ID and some value.
			if( textID != "" && textValue != "" ) {
				writeLog( "Saving: " + textID + " -> " + textValue, LOG_MOREINFO );
				savedContent[globalIndex] = { "textID": textID, "textValue": textValue };
				globalIndex++; }
		}
		
		// Scanning the Input Text
		text = document.getElementsByTagName( "input" );
		for( var index = 0; index < text.length; index++ )
			if( text[index].type == "text" || text[index].type == "hidden") {
				textID = text[index].id;
				textValue = text[index].value
				// Checking if they had a Valid ID and some Value.
				if( textID != "" && textValue != "" ) {
					writeLog( "Saving: " + textID + " -> " + textValue, LOG_MOREINFO );
					savedContent[globalIndex] = { "textID": textID, "textValue": textValue };
					globalIndex++; }
		}

		localStorage.savedElement = JSON.stringify( savedContent );
		window.setTimeout( saveContent, backupTimer );
		
	}

	//functions for formatting text
	function formatting(format){
		textarea = $('#text_content')[0];
		textarea.focus();
		text = document.getSelection().toString();
		switch(format){
			case 'b':
				document.execCommand('bold',false,null);
				break;
			case 'i':
				document.execCommand('italic',false,null);
				break;
			case 'u':
				document.execCommand('underline',false,null);
				break;
			case 'del':
				document.execCommand('insertHTML',false,'<del>'+text+'</del>',true);
				break;
			case 'quote':
				document.execCommand('insertHTML',false,'<q>'+text+'</q>',true);
				break;
			case 'code':
				document.execCommand('insertHTML',false,'<code>'+text+'</code>',true);
				break;
			case 'l':
				document.execCommand('insertHTML',false,'<a href="'+$('#link_url')[0].value+'">'+text+'</a>',true);
				break;
			case 'clean':
				document.execCommand("selectall");
				document.execCommand('RemoveFormat',false);
				document.execCommand("Unselect");
				break;
		}
	}
	
	function convert_div2textarea(){
		newContent = $('#text_content').html();
		//bold
		newContent = newContent.replace(/\<b[^\>]*\>([\s]*.+?[\s]*)(?!\<b[^\>]*\>)\<\/b\>/ig,"[b]$1[/b]");
		newContent = newContent.replace(/\<strong[^\>]*\>([\s]*.+?[\s]*)(?!\<strong[^\>]*\>)\<\/strong\>/ig,"[b]$1[/b]");
		//italic
		newContent = newContent.replace(/\<i[^\>]*\>([\s]*.+?[\s]*)\<\/i\>/ig,"[i]$1[/i]");
		newContent = newContent.replace(/\<em[^\>]*\>([\s]*.+?[\s]*)\<\/em\>/ig,"[i]$1[/i]");
		//underline
		newContent = newContent.replace(/\<u[^\>]*\>([\s]*.+?[\s]*)\<\/u\>/ig,"[u]$1[/u]");
		//del
		newContent = newContent.replace(/\<del[^\>]*\>([\s]*.+?[\s]*)\<\/del\>/ig,"[del]$1[/del]");
		//quote
		newContent = newContent.replace(/\<q[^\>]*\>([\s]*.+?[\s]*)\<\/q\>/ig,"[quote]$1[/quote]");
		//code
		newContent = newContent.replace(/\<code[^\>]*\>([\s]*.+?[\s]*)\<\/code\>/ig,"[code]$1[/code]");
		//link
		newContent = newContent.replace(/\<a[^\>]*href="([^"]*)"[^\>]*>([^\<]*)\<\/a\>/ig,"[l:$1|$2]");
		//newlines
		newContent = newContent.replace(/\n/ig," ");
		newContent = newContent.replace(/\<br[^\>]*[\/]*>/ig,"\n");
		newContent = newContent.replace(/\<p[^\>]*>/ig,"\n");
		newContent = newContent.replace(/\<div[^\>]*>/ig,"\n");
		//everything else
		newContent = newContent.replace(/\<[^\>]*>/ig,"");
		//setting the value
		$('form')[0].text_content.value=newContent;		
	}
	function convert_textarea2div(){
		newContent = $('form')[0].text_content.value;
		//bold
		newContent = newContent.replace(/\[b\]([\s]*.+?[\s]*)\[\/b\]/ig,"<b>$1</b>");
		//italic
		newContent = newContent.replace(/\[i\]([\s]*.+?[\s]*)\[\/i\]/ig,"<i>$1</i>");
		//underline
		newContent = newContent.replace(/\[u\]([\s]*.+?[\s]*)\[\/u\]/ig,"<u>$1</u>");
		//del
		newContent = newContent.replace(/\[del\]([\s]*.+[\s]*)\[\/del\]/ig,"<del>$1</del>");
		//quote
		newContent = newContent.replace(/\[quote\]([\s]*.+?[\s]*)\[\/quote\]/ig,"<q>$1</q>");
		//code
		newContent = newContent.replace(/\[code\]([\s]*.+?[\s]*)\[\/code\]/ig,"<code>$1</code>");
		//link
		newContent = newContent.replace(/\[l:([^\|]+)\|([^\]]+)\]/ig,'<a href="$1">$2</a>');
		//newlines
		newContent = newContent.replace(/\n/ig,"<br />");
		//setting the value
		$('#text_content').html(newContent);
	}
	
	</script>
</head>
<body onload="init();" >
	<div>
		<div id="message-area">messaggio</div>
		<div id="create-new-meme" style="display: none;"><a href="javascript:showMeemiForm();"><img src="icons/create-new-meme.png" /></a></div>
		<div id="selector">
			<script>createSelector();</script>
			<a href="javascript:openPage();" ><img id="home-link" src="icons/home.png" /></a>
		</div>
	</div>

	<div id="meemi-form">
		<ul class="menu"> 
			<li><a class="active" href="javascript:void(0);" onclick="$('a').removeClass('active'); $(this).addClass('active'); section('text');"><span>Text</span></a></li> 
			<li><a href="javascript:void(0);" onclick="$('a').removeClass('active'); $(this).addClass('active');section('quote');"><span>Quote</span></a></li> 
			<li><a href="javascript:void(0);" onclick="$('a').removeClass('active'); $(this).addClass('active');section('image');"><span>Photo</span></a></li> 
			<li><a href="javascript:void(0);" onclick="$('a').removeClass('active'); $(this).addClass('active');section('link');"><span>Link</span></a></li> 
			<li><a href="javascript:void(0);" onclick="$('a').removeClass('active'); $(this).addClass('active');section('event');"><span>Event</span></a></li> 
			<li><a href="javascript:void(0);" onclick="$('a').removeClass('active'); $(this).addClass('active');section('video');" id="video_btn"><span>Video</span></a></li>
		</ul>
		
		<form id="container" class="round">
			<div id="new-meme">
			<!-- Text --> 
				<input type="hidden" name="meme_type" id="meme_type" value="text" /> 
				<strong>Text</strong>
				<div id="formatting">
					<a href="javascript:void(0);" onclick="javascript:formatting('b');"><img src="icons/format_bold.png" alt="[b]" title="Grassetto" /></a>
					<a href="javascript:void(0);" onclick="javascript:formatting('i');"><img src="icons/format_italic.png" alt="[i]" title="Corsivo" /></a>
					<a href="javascript:void(0);" onclick="javascript:formatting('u');"><img src="icons/format_underline.png" alt="[u]" title="Sottolineato" /></a>
					<a href="javascript:void(0);" onclick="javascript:formatting('del');"><img src="icons/format_del.png" alt="[del]" title="Cancellato" /></a>
					<a href="javascript:void(0);" onclick="javascript:formatting('quote');"><img src="icons/format_quote.png" alt="[quote]" title="Citazione" /></a>
					<a href="javascript:void(0);" onclick="javascript:formatting('code');"><img src="icons/format_code.png" alt="[code]" title="Codice" /></a>
					<a href="javascript:void(0);" onclick="javascript:formatting('l');"><img src="icons/format_link.png" alt="[link]" title="collegamento" /></a>
					<a href="javascript:void(0);" onclick="javascript:formatting('clean');"><img src="icons/format_clean.png" alt="[clean all]" title="Ripulisci Formattazione" /></a>
				</div>
				<div contentEditable id="text_content" tabindex="1" style="margin-top: 3px"></div> 
				<input type="hidden" name="text_content" id="text_content_old"/>
				<span class="tips_small"> 
					<a title="Per postare anche su Twitter." href="javascript:void(0);" onclick="add_twitter();">Twitter</a> | 
					<a title="Salva questo meme come bozza." href="javascript:void(0);" onclick="add_notes();">Draft</a> 
				</span> 
			
				<div id="f_text"></div> 
			
				<div id="f_quote" style="display:none"> 
					<div id="media-content">Author</div>
					<input type="text" name="quote_author" id="quote_author" class="txt" tabindex="2"/> 
				</div> 
			
				<div id="f_image" style="display:none;"> 
					<div id="media-content">Image</div> 
					<div id="images_list"></div>
					<div id="img_url_content"><strong>Or enter it by URL</strong>
					<input type="text" name="img_url" id="img_url" class="txt" tabindex="3"/></div>
				</div> 
			
				<div id="f_link" style="display:none"> 
					<div id="media-content">URL</div> <span class="optional">http://www.domain.ext</span> 
					<textarea name="link_url" id="link_url" tabindex="4"></textarea> 
				</div> 
			
				<div id="f_event" style="display:none"> 
					<div id="media-content">Title</div> 
					<input type="text" name="event_title" id="event_title" class="txt" tabindex="5"/> 
					<strong>Where</strong> 
					<input type="text" name="event_where" id="event_where" class="txt" tabindex="6"/> 
			
					<strong>When</strong>
					<br />
					<script>
						var now = new Date(); // To set the Default value on Now, using Date cause Calendar not implemented.
						var elements = new Array();
						var elementsName = [ "hour", "minute", "day", "month", "year" ];
						
						function createOption( index, selected ) {
							var option = document.createElement( "option" );
							// Aggiunge lo zero davanti ai numeri < 10.
							var indexStr = ( index < 10 ? "0" : "" ) + index.toString();
							option.value = indexStr;
							option.innerHTML = indexStr;
							if( index == selected )
								option.selected = "selected";
							return option;
						}
						
						// Create the select boxes for the date.
						for( var index = 0; index < 5; index++ ) {
							elements[index] = document.createElement( "select" );
							elements[index].name = elementsName[index];
							elements[index].setAttribute( "tabindex", 7 + index ); }

						for( var index = 0; index < 24; index++ )
							elements[0].appendChild( createOption( index, now.getHours() ));
						
						for( var index = 0; index < 60; index++ )
							elements[1].appendChild( createOption( index, now.getMinutes() ) );
							
						for( var index = 1; index < 32; index++ )
							elements[2].appendChild( createOption( index, now.getDate() ));

						for( var index = 1; index < 13; index++ )
							elements[3].appendChild( createOption( index, now.getMonth() + 1 ));
						
						var year = now.getFullYear();
						for( var index = year; index < year + 20; index++ )
							elements[4].appendChild( createOption( index, year ));
						
						// Inserting text label and Select on page.
						document.getElementById( "f_event" ).appendChild( document.createTextNode( "Ora: " ));
						for( var index = 0; index < elements.length; index++ ) {
							document.getElementById( "f_event" ).appendChild( elements[index] );
							if( index == 1 )
								document.getElementById( "f_event" ).appendChild( document.createTextNode( " - Data: " ));
						}
					</script>
				</div> 

				<div id="f_video" style="display:none"> 
					<div id="media-content">Video</div> 
					<textarea name="video_content" id="video_content" tabindex="12"></textarea> 
				</div> 
			
				<div id="opt" style="display:none"> 
					<strong>Source <span class="optional">(optional)</span></strong> 
					<input type="text" name="fonte" id="fonte" class="txt" value="" /> 
					<strong>Channels <span class="optional">(optional)</span></strong> 
					<input type="text" name="channels" id="channels" class="txt" /> 
				</div> 
				<div id="emoticons" class="round" style="display:none"> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':)');"><img src='http://meemi.com/stc/i/emo/smile.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':o)');"><img src='http://meemi.com/stc/i/emo/smile_clown.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(';)');"><img src='http://meemi.com/stc/i/emo/wink.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':s');"><img src='http://meemi.com/stc/i/emo/confused.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':(');"><img src='http://meemi.com/stc/i/emo/cry.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':o');"><img src='http://meemi.com/stc/i/emo/surprised.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':D');"><img src='http://meemi.com/stc/i/emo/grin.png' /></a>					
					<a href="javascript:void(0);" onclick="placeEmoticons(':P');"><img src='http://meemi.com/stc/i/emo/tongue.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons('*-)');"><img src='http://meemi.com/stc/i/emo/think.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':|');"><img src='http://meemi.com/stc/i/emo/disappointed.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons('(h)');"><img src='http://meemi.com/stc/i/emo/glass-cool.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons('8-|');"><img src='http://meemi.com/stc/i/emo/glass-nerd.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':@');"><img src='http://meemi.com/stc/i/emo/angry.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons(':$');"><img src='http://meemi.com/stc/i/emo/embara.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons('(zz)');"><img src='http://meemi.com/stc/i/emo/sleep.png' /></a> 
					<a href="javascript:void(0);" onclick="placeEmoticons('(k)');"><img src='http://meemi.com/stc/i/emo/kiss.png' /></a> 
				</div>
				<button id="send-meme-button" class="button" onClick="submitForm();" tabindex="13">Send Meme</button>
				<a href="javascript:void(0);" onclick="optio();">options</a> 
				<a href="javascript:void(0);" onclick="emo();">emoticons</a>
				<div id="source-check" class="round"><a href="javascript: void(0);" onClick="sourceClick( this )"><span class="">Source</span></a></div>
			</div>
		</form>
		<div id="footer">
			<div id="random-meme" class="round">
				<div id="random-meme-author">
				</div>
				<div id="random-meme-text">
				</div>
				<div id="random-meme-type">
					Random meme: 
				</div>
				<script>if( localStorage.showRandomMeme != "hide" ) compileRandomMeme();</script>
			</div>
			<img id="meemi-text-logo" src="meemi-text-logo.png" />
		</div><!--end of id="footer"-->
	</div>
	
	<div id="meemi-memelist" style="display:none">
	</div> <!--end of id="meemi-memelist"-->
	
</body>
</html>
